<div class="project-edit-member container-fluid">

  <div class="row">
    <div class="list-toolbar col-xl-12">
      <div class="title">
        <span>项目成员</span>
      </div>

      <div class="filter">

      </div>

      <div class="buttons">

      </div>
    </div>
  </div>

  <div class="row">
    <form [formGroup]="formAdd" class="my-validate-form form-add">

      <div class="form-group row">
        <label class="col-2 col-form-label"><span>用户组/用户名/邮箱</span></label>
        <div class="col-10">
          <search-select [(searchModel)]="searchModel" [searchResult]="entitySearchResult"
                         [(selectedModels)]="selectedModels"
                         (searchChange)="changeSearch($event)">
          </search-select>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label"><span>项目角色</span></label>
        <div class="col-10">
          <select [(ngModel)]="modelAdd.roleId" formControlName="projectRole" class="form-control" name="projectRole">
            <option *ngFor="let entry of projectRoles" value="{{entry.id}}">
              <span>{{entry.name}}</span>
            </option>
          </select>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-2 col-form-label"></label>
        <div class="col-10">
          <button (click)="add($event)" [disabled]="selectedModels.length == 0 || !modelAdd.roleId"
                  type="button" class="btn btn-primary">保存
          </button>
        </div>
      </div>

    </form>
  </div>

  <div class="row table-container">
    <table class="table table-bordered table-hover th-bolder">
      <thead>
      <tr>
        <th>名称</th>
        <th>类型</th>
        <th class="role">项目角色</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of entityInRoles">
        <td>{{ item.entityName }}</td>
        <td>
          <span *ngIf="item.type=='user'">用户</span>
          <span *ngIf="item.type=='group'">用户组</span>
        </td>
        <td class="role">
          <select (change)="changeRole($event.target.value, item.entityId)" [ngModel]="item.projectRoleId"
                  class="form-control form-control-sm">
            <option *ngFor="let entry of projectRoles" value="{{entry.id}}">
              <span>{{entry.name}}</span>
            </option>
          </select>
        </td>
        <td>
          <span *ngIf="item.type != 'user' || currUserId != item.entityId" (click)="showDeleteModal(item)" class="link">移除</span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

<pop-dialog #modalWrapper (confirm)="remove(entityToRemove)" [title]="'提示'">
  确认移除名为"{{entityToRemove.entityName}}"的
  <span *ngIf="entityToRemove.type=='user'">用户</span>
  <span *ngIf="entityToRemove.type=='group'">用户组</span>?
</pop-dialog>
